<script setup lang="ts">
import { ref } from 'vue';
import TaskList from './components/TaskList.vue';
import HistoryTaskList from './components/HistoryTaskList.vue';

const activeMenu = ref('tasks'); // 默认显示任务管理页面

const setActiveMenu = (menu: string) => {
  activeMenu.value = menu;
};

// 大模型配置相关数据
const modelProvider = ref('阿里云');
const modelProviders = ['阿里云', '腾讯云', 'deepseek', 'ollama'];
const serviceUrl = ref('');
const modelName = ref('');
const apiKey = ref('');

// 保存配置
const saveConfig = () => {
  // 这里可以添加保存配置的逻辑，例如发送到后端或保存到本地存储
  alert('配置已保存！');
  console.log({
    provider: modelProvider.value,
    serviceUrl: serviceUrl.value,
    modelName: modelName.value,
    apiKey: apiKey.value
  });
};
</script>

<template>
  <div class="app-container">
    <div class="sidebar">
      <h2>agent-todo</h2>
      <ul class="menu">
        <li 
          :class="{ active: activeMenu === 'tasks' }" 
          @click="setActiveMenu('tasks')"
        >
          任务管理
        </li>
        <li 
          :class="{ active: activeMenu === 'history' }" 
          @click="setActiveMenu('history')"
        >
          历史任务
        </li>
        <li 
          :class="{ active: activeMenu === 'settings' }" 
          @click="setActiveMenu('settings')"
        >
          设置
        </li>
      </ul>
    </div>
    
    <div class="main-content">
      <div v-if="activeMenu === 'tasks'">
        <TaskList />
      </div>
      <div v-else-if="activeMenu === 'history'">
        <HistoryTaskList />
      </div>
      <div v-else-if="activeMenu === 'settings'">
        <div class="settings-panel">          
          
          <div class="form-group">
            <label for="model-provider">模型服务商</label>
            <select id="model-provider" v-model="modelProvider" class="form-control">
              <option v-for="provider in modelProviders" :key="provider" :value="provider">
                {{ provider }}
              </option>
            </select>
          </div>
          
          <div class="form-group">
            <label for="service-url">服务地址</label>
            <input 
              type="text" 
              id="service-url" 
              v-model="serviceUrl" 
              placeholder="请输入模型服务地址" 
              class="form-control"
            />
          </div>
          
          <div class="form-group">
            <label for="model-name">模型名称</label>
            <input 
              type="text" 
              id="model-name" 
              v-model="modelName" 
              placeholder="请输入模型名称" 
              class="form-control"
            />
          </div>
          
          <div class="form-group">
            <label for="api-key">API密钥</label>
            <input 
              type="password" 
              id="api-key" 
              v-model="apiKey" 
              placeholder="请输入API密钥" 
              class="form-control"
            />
          </div>
          
          <button @click="saveConfig" class="save-btn">保存配置</button>
        </div>
      </div>
    </div>
  </div>
</template>

<style>
body {
  margin: 0;
  padding: 0;
  font-family: Arial, sans-serif;
  background-color: #f5f5f5;
  overflow: hidden;
}
</style>

<style scoped>
.app-container {
  display: flex;
  height: 100vh;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

.sidebar {
  width: 250px;
  background-color: #333;
  color: white;
  padding: 20px 0;
  margin: 0;
  position: fixed;
  left: 0;
  top: 0;
  height: 100vh;
  z-index: 10;
}

.sidebar h2 {
  padding: 0 20px;
  margin-top: 0;
}

.menu {
  list-style: none;
  padding: 0;
  margin: 0;
}

.menu li {
  padding: 10px 20px;
  cursor: pointer;
}

.menu li:hover {
  background-color: #444;
}

.menu li.active {
  background-color: #555;
}

.main-content {
  flex: 1;
  padding: 20px;
  margin-left: 250px;
  height: 100vh;
  overflow-y: auto;
}

.settings-panel {
  background-color: white;
  border-radius: 4px;
  padding: 200px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  max-width: 1080px;
  margin: 0 auto;
}

.form-group {
  margin-bottom: 20px;
}

.form-group label {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
}

.form-control {
  width: 600px;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 16px;
}

.save-btn {
  padding: 10px 20px;
  background-color: #4CAF50;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
}

.save-btn:hover {
  background-color: #45a049;
}
</style>
